<template>
	<view class="main">
			<u-toast ref="uToast"></u-toast>
			<view class="header_search">
				<view class="flex flex_bet flex_align">
					<view class="search flex flex_bet flex_align">
						<u-search placeholder="搜索快递单号,电话号码,SN码" v-model="listQuery.search" :show-action="false"
							:search_sty="true" searchClass="no_border_r" borderColor="rgb(230, 230, 230)" shape="round"
							bgColor="#fff" searchIcon="scan" @clickIcon="iconScan">
						</u-search>
						<view class="search_btn" @click="searchBtn">
							<text>搜索</text>
						</view>
					</view>
					<!-- <view class="search_select">
						<uni-data-select placeholder="请选择类型" v-model="listQuery.type" :localdata="options">
						</uni-data-select>
					</view> -->
					<view class="toatlity">{{listQuery.type ? '当前环节总数' : '寄修总数'}}：{{total}}</view>
				</view>
			</view>
			<view class="content send_item" v-for="item in tableData" :key="item.id" @click="gotoLetters(item.is_branch,item.express_number,item.id)">
				<view class="date flex flex_bet flex_align">
					<view class="time">签收日期：<text>{{item.signfor_time ? item.signfor_time.slice(0,-3) : '未签收'}}</text></view>
					<view class="state" v-if="item.status == '暂存'">当前状态：<text style="color: #211b9c;">暂存</text></view>
					<view class="state" v-else >当前状态：<text style="color: #d1d1d1;"  :class="[item.status=='待签收'?'unreceipted': item.status=='已签收'?'signed':'signed']">{{item.status}}</text></view>
				</view>
				<view class="details flex flex_bet flex_align">
					<view class="details_text">
						<view class="text"><text class="info">寄修产品型号：</text>{{item.product_model}}</view>
						<view class="text"><text class="info">寄修产品SN码：</text>{{item.serial_number}}</view>
						<view class="text"><text class="info">寄修单号：</text>{{item.order_num}}</view>
						<view class="text"><text class="info">快递单号：</text>
							<text
								:class="item.express_number ? '' : 'coRed'">{{item.express_number ? item.express_number : '订单暂存，请完善寄回快递单号'}}</text>
							<!-- <text class="mar_left iconfont icon-fuzhi" @click="copy(item.express_number)"></text> -->
						</view>
						
						<view class="text flex flex_ali"><text class="info" style="width: 120rpx;">姓&nbsp;&nbsp;&nbsp;名：</text>{{item.user_man}}</view>
						<view class="text"><text class="info">电话号码：</text>{{item.user_phone}}</view>
					</view>
					<view class="details_icons" style="z-index: 3;">
						<!-- <image src="../../static/image/index8.png" mode=""></image>
						<view class="" style="margin-top: 10rpx;font-size: 28rpx;">查看申请</view> -->
						<view class="infos_btn" @tap.stop="goToUrl(item.id)">
							<!-- <text class="iconfont icon-chakan"></text> -->
							<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/see.png" mode="widthFix" style="width: 60rpx;"></image>
							<view class="" style="font-size: 28rpx;color: #9a9a9a;">查看</view>
						</view>
						<view class='infos_btn' @tap.stop="goToUrl(item.id)" v-if="!item.express_number">
							<!-- <text class="iconfont icon-tijiao"></text> -->
							<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/submit.png" mode="widthFix" style="width: 60rpx;"></image>
							<view class="" style="font-size: 28rpx;color: #9a9a9a;">提交</view>
						</view>
						<view class="infos_btn"  v-else>
							<!-- <text class="iconfont icon-tijiao"></text> -->
							<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/nosubmit.png" mode="widthFix" style="width: 60rpx;"></image>
							<view class="" style="font-size: 28rpx;color: #9a9a9a;">提交</view>
						</view>
						<!-- <view class="infos_btn" v-show="!item.express_number" @click="goToUrl(item.id)">
							<text class="iconfont icon-tijiao"></text>
							<view class="" style="margin-top: 10rpx;font-size: 28rpx;color: #9a9a9a;">提交</view>
						</view> -->
						<view class="infos_btn" @tap.stop="openShow(item.id)">
							<!-- <text class="iconfont icon-shanchu2"></text> -->
							<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/del.png" mode="widthFix" style="width: 60rpx;"></image>
							<view class="" style="font-size: 28rpx;color: #9a9a9a;">删除</view>
						</view>
					</view>
					<view class="letter" v-if="item.is_branch">子母件</view>
				</view>
				<view class="line"></view>	
				<view class="send_item_fot flex flex_bet" >
					<template v-if="item.is_branch">
						<text>注*该订单有子母件</text>
						<text>*请留意系统将自动按产品拆单;</text>
					</template>
				</view>
			</view>
			<u-loadmore :status="loadStatus"/>
		</view>
</template>

<script>
	import {
		repairList,
		repairDelete,
		repairStatistics
	} from '@/api/repair.js'
	export default {
		data() {
			return {
				listQuery: {
					startSize: 1,
					pageSize: 10,
					search: '',
					type: ''
				},
				tableData: [],
				total: 0,
				value: '',
				loadStatus: 'loadmore',
				options: [{
						text: '快递中',
						value: 1
					},
					{
						text: '签收',
						value: 2
					},
					{
						text: '复判',
						value: 3
					},
					{
						text: '付款',
						value: 4
					},
					{
						text: '维修中',
						value: 5
					},
					{
						text: '寄回',
						value: 6
					}
				]
			}
		},
		onLoad(option) {
			if (option.type) {
				this.listQuery.type = option.type
			}
		},
		onShow() {
			this.listQuery.startSize = 1
			this.getrepairList('search')
		},
		methods: {
			//去子母件列表
			gotoLetters(val,express_number,id){
				// if(!val) return;
				if(val){
					uni.navigateTo({
						url:'/pages/lettersList/index?express_number='+express_number
					})
				}else{
					uni.navigateTo({
						url: '/pages/applicationDetails/index?id=' + id
					})
				}
				
			},
			openShow(id) {
				let that = this
				uni.showModal({
					title: '',
					content: '是否要删除该订单信息!',
					success: function(res) {
						if (res.confirm) {
							that.getrepairDelete(id)
						}
					}
				});
			},
			//删除订单信息
			getrepairDelete(id) {
				repairDelete({
					id: id
				}).then(res => {
					this.$refs.uToast.show({
						message: res.msg,
						icon: false,
						type: 'success'
					})
					this.listQuery.startSize = 1
					this.getrepairList('search')
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//获取寄修记录
			getrepairList(type) {
				repairList(this.listQuery).then(res => {
					this.loadStatus = ''
					if (type === 'search') {
						this.tableData = res.data
						console.log(res.data);
					} else {
						this.tableData = [].concat(this.tableData, res.data)
					}
					this.total = res.total
				}).catch(err => {
					this.loadStatus = 'nomore'
					if (type === 'search') {
						this.tableData = []
						this.total = 0
					}
				})
			},
			goToUrl(id) {
				uni.navigateTo({
					url: '/pages/applicationDetails/index?id=' + id
				})
			},
			onReachBottom() {
				this.loadStatus = 'loading'
				this.listQuery.startSize = ++this.listQuery.startSize
				this.getrepairList()
			},
			//输入框搜索事件
			searchBtn() {
				uni.$u.debounce(this.toNext, 1000)
			},
			searchChange(val) {
				this.listQuery.search = val
				//防抖
				uni.$u.debounce(this.toNext, 1000)
			},
			toNext() {
				this.listQuery.startSize = 1
				this.getrepairList('search')
			},
			//复制订单号
			copy(item) {
				let that = this
				if (!item) return that.$u.toast('暂无订单号信息');
				uni.setClipboardData({
					data: item,
					success(res) {
						that.$u.toast('复制成功')
					}
				})
			},
			//扫码获取快递单号
			iconScan() {
				let that = this
				uni.scanCode({
					scanType: ['barCode'],
					success: function(res) {
						console.log('条码内容：', res.result);
						that.listQuery.search = res.result
						that.getrepairList('search')
					},
					fail: function(err) {
						that.$u.toast('扫描失败')
					}
				});
			}
		}
	}
</script>

<style scoped>

</style>
<style lang="scss" scoped>
	.content{
		padding: 0;
	}
	.main {
		color: #666;
	}
	.header_search {
		// border-bottom: 1rpx solid #C5C6C8;
		// padding-bottom: 40rpx;
		.search {
			flex: 1;
		}
		.toatlity {
			width: 30%;
			text-align: center;
		}
	}
	.date{
		.time{
			// font-size: 2rpx;
			color: #a4a3a9;
			text{
				color: #fff;
			}
		}
	}
	.state {
		// width: 46%;
		text-align: center;
		// font-size: 28rpx;
		color: #a4a3a9;
		text {
			border-top-left-radius: 10rpx;
			border-bottom-left-radius: 10rpx;
			padding: 0 20rpx;
			background: #fff;
			color: #70b37c;
		}
	}
	.search_select {
		width: 30%;
		height: 64rpx;
		background-color: #fff;
		border-radius: 0 100px 100px 0;
		border-color: rgb(230, 230, 230);
		text-align: center;
		border-width: 2rpx;
		border-style: solid;
		border-left: none;
	}

	.coRed {
		color: red;
	}

	.details {
		position: relative;
		padding: 0 10rpx;
		.details_text{
			.text{
				color: #555;
				.info{
					color: #acacac;
				}
			}
		}
		.details_icons {
			display: flex;
			position: absolute;
			bottom: 0;
			right: 20rpx;
		}
		.infos_btn {
			margin-left: 10px;
			text-align: center;
			// text {
			// 	// padding: 8rpx 15rpx;
			// 	font-size: 48rpx;
			// 	display: inline-block;
			// }
		}
	}
	//禁用状态下
	.forbidden{
		text-align: center;
		text {
			background: #fff;
			padding: 8rpx 15rpx;
			border-radius: 50%;
			font-size: 48rpx;
			color:#bcbcbc;
			display: inline-block;
		}
	}
	.send_item{
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		.date{
			padding-top: 20rpx;
			padding-left: 10rpx;
			background: #60606a;
			.text{
				
			}
		}
		.line{
			width: 95%;
			height: 1px;
			background: #ededed;
			margin: 10rpx auto;
		}
		.letter{
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			color: #313131;
			font-weight: 700;
		}
		.send_item_fot{
			height: 40rpx;
			line-height: 40rpx;
			padding:0 10rpx 10rpx 10rpx;
			text{
				color: #f5b5a3;
			}
		}
	}
	.signed{
		background-color: #d9ffe5 !important;
		color: #36af57 !important;
	}
	.unreceipted{
		background-color: #ffefef !important;
		color: #df6163 !important;
	}
</style>
